<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: #f00;
            display: flex;
        }
        span{
            width: 100px;
            height: 100px;
            background-color: #00daa0;
        }
    </style>
</head>
<body>

    <div>
        <span></span>
    </div>

    <script>

        // 鼠标事件
        //   click(左键单击)   dblclick(左键双击)
        //   mousedown   mouseup   鼠标抬起和鼠标按下   可以是左键，滚轮和右键   e.button 记录是按哪个键触发的事件   0左键   1滚轮   2右键
        //   mouseover   mouseout    鼠标移入移出   正常支持冒泡流
        //   mouseenter  mouseleave  鼠标移入移出   enter支持捕获流
        //   mousemove  鼠标移动


        var oDiv = document.querySelector('div') ;
        var oSpan = document.querySelector('span') ;

        oDiv.addEventListener('click' , function() {
            console.log('click');
        })

        oDiv.addEventListener('dblclick' , function() {
            console.log('双击');
        })

        oDiv.addEventListener('mousedown' , function(e) {
            console.log(e.button);  // 记录是按哪个键触发的事件   0左键   1滚轮   2右键
            console.log('鼠标按下');
        })

        oDiv.addEventListener('mouseup' , function(e) {
            console.log(e.button);  // 记录是按哪个键触发的事件   0左键   1滚轮   2右键
            console.log('鼠标抬起');
        })


        // oDiv.addEventListener('mouseover' , function(e) {
        //     this.style.background = 'green' ;
        // })
        // oDiv.addEventListener('mouseout' , function(e) {
        //     this.style.background = 'red' ;
        // })


        // oDiv.addEventListener('mouseenter' , function(e) {
        //     this.style.background = 'green' ;
        // })
        // oDiv.addEventListener('mouseleave' , function(e) {
        //     this.style.background = 'red' ;
        // })


        // oDiv.addEventListener('mouseover' , function(e) {
        //     console.log('div over');
        // })
        // oDiv.addEventListener('mouseout' , function(e) {
        //     console.log('div out');
        // })

        // oSpan.addEventListener('mouseover' , function(e) {
        //     console.log('span over');
        // })
        // oSpan.addEventListener('mouseout' , function(e) {
        //     console.log('span out');
        // })


        oDiv.addEventListener('mouseenter' , function(e) {
            console.log('div over');
        })
        oDiv.addEventListener('mouseleave' , function(e) {
            console.log('div out');
        })

        oSpan.addEventListener('mouseenter' , function(e) {
            console.log('span over');
        })
        oSpan.addEventListener('mouseleave' , function(e) {
            console.log('span out');
        })


        var flag = true ;
        oDiv.addEventListener('mousemove' , function() {
            if(flag) {
                flag = false ;
                setTimeout(function(){
                    oDiv.style.background = randColor() ;
                    flag = true ;
                },150)
            }
            
        })







        function randColor() {
            var r = parseInt(Math.random() * 256) ;
            var g = parseInt(Math.random() * 256) ;
            var b = parseInt(Math.random() * 256) ;
            // return 'rgba(r,g,b)'
            return `rgba(${r},${g},${b})`
        }




    </script>
    
</body>
</html>